<template>
	<el-dialog title="导出表格" class="export-report" v-el-drag-dialog :visible.sync="dialogVisible" width="45%" top="10vh">
		<div class="derive-box">
			<div class="derive-box_p1">
				<el-form class="derive_el-form">
					<el-form-item label="总记录数">
						<div class="derive-text">
							<x-code>{{paraObj.pageShow}}</x-code>
						</div>
						<div class="derive-intro">总记录数</div>
					</el-form-item>
					<el-form-item label="每页导出数">
						<el-input-number size="medium" @change="numberChang" v-model="paraObj.pageSize" label="每页导出数" :min="1" :max="10000"></el-input-number>
						<div class="derive-intro">每次最多导入10000条，超过请分页导出</div>
					</el-form-item>
					<el-form-item label="导出页数">
						<el-input-number size="medium" v-model="paraObj.pageIndex" label="导出页数" :min="1" :max="maxPagesIndex"></el-input-number>
						<div class="derive-intro">数字的最大值，不能超过{{maxPagesIndex}}</div>
					</el-form-item>
					<el-form-item label="下载地址" v-if="downloadUrl">
						<div class="derive-url" @click="downloadTab(downloadUrl.url)">{{downloadUrl.name}}</div>
						<div class="derive-intro">点击可下载</div>
					</el-form-item>
				</el-form>
			</div>
			<div class="derive-box_p2">
				<el-checkbox class="p2-check1" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">导出项<span>{{checLength}}/{{checkList.length}}</span></el-checkbox>
				<el-checkbox-group class="p2-check2" v-model="checkedCities" @change="handleCheckedCitiesChange">
					<el-checkbox v-for="(city,index) in checkList" :label="city" :key="index">{{city}}</el-checkbox>
				</el-checkbox-group>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="submit" :loading="isLoading">确认</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import elDragDialog from '@/service/directives/el-dragDialog'
	import ala from 'ala'
	export default {
		directives: {
			elDragDialog
		},
		data() {
			return {
				dialogVisible: false,
				paraObj: {
					pageSize: 100,
					pageIndex: 1,
					pageShow: 0,
					type: ''
				},
				downloadUrl: null,
				apiUrl: null,
				dataModel: null,
				maxPagesIndex: 1,
				isLoading: false,
				checkList: [],
				checkAll: false,
				checkedCities: [],
				isIndeterminate: false,
				checLength: 0
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init(searchOptions) {

			},
			handleCheckAllChange(val) {
				this.checkedCities = val ? this.checkList : []
				this.checLength = this.checkedCities.length
				this.isIndeterminate = false
			},
			handleCheckedCitiesChange(value) {
				this.checLength = value.length
				let checkedCount = value.length
				this.checkAll = checkedCount === this.checkList.length
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkList.length
			},
			popupChang(apiUrl, dataModel, data) {
				this.apiUrl = apiUrl
				this.dataModel = dataModel
				this.paraObj.pageShow = data.totalCount
				this.maxPagesIndex = Math.ceil(this.paraObj.pageShow / this.paraObj.pageSize)
				this.checkList = data.columns
				this.handleCheckAllChange(true)
				this.handleCheckedCitiesChange(this.checkList)
				this.dialogVisible = true
			},
			numberChang(val1, val2) {
				this.maxPagesIndex = Math.ceil(this.paraObj.pageShow / val1)
			},
			async submit() {
				this.isLoading = true
				for (var k in this.paraObj) {
					if (this.paraObj[k] === undefined || this.paraObj[k] === '' || this.paraObj[k] === null) {
						delete this.paraObj[k]
					}
				}
				var para = {
					...this.dataModel,
					...this.paraObj
				}
				var url = this.apiUrl + '?isExcel=true&cols=' + JSON.stringify(this.checkedCities)
				var response = await ala.httpPost(url, para)
				if (response) {
					var exclePath = ala.host + response.value
					this.downloadUrl = {
						name: response.name,
						url: exclePath
					}
					this.downloadTab(exclePath)
					ala.toast('表格成功导出')
				}
				this.isLoading = false
			},
			downloadTab(val) {
				window.open(val, '_blank')
			}
		}
	}
</script>
<style lang="scss">
	.export-report {
		.el-dialog {
			height: 80vh;
			display: flex;
			flex-direction: column;

			.el-dialog__body {
				flex: 1;
				min-height: 0;
				overflow: auto;
			}

			.el-dialog__footer {
				border-top: 1px solid #e5e5e5;
			}
		}

		.el-form-item {
			margin-bottom: 10px;
		}

		.derive-box {
			display: flex;
			flex-direction: row;
			height: 100%;

			.derive_el-form {
				.el-input-group__append {
					width: 88px;
				}

				.el-form-item {
					margin-bottom: 5px;
				}

				.el-form-item__label {
					margin-right: 10px;
					width: 100px;
				}

				.derive-intro {
					line-height: 16px;
				}

				.derive-url {
					cursor: pointer;
					color: royalblue;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			.derive-box_p1 {
				padding: 20px 20px 0 20px;
				flex: 1;
				min-width: 0;
				height: 100%;
				overflow: auto;
			}

			.derive-box_p2 {
				width: 150px;
				border-left: 1px solid #f5f5f5;
				overflow: auto;

				.p2-check1 {
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 100%;
					padding: 10px;
					background-color: #f5f7fa;

					.el-checkbox__label {
						flex: 1;
						min-width: 0;
						display: flex;
						flex-direction: row;
						align-items: center;

						span {
							flex: 1;
							text-align: right;
							color: #9dbee7;
						}
					}
				}

				.p2-check2 {
					padding: 0 10px;

					.el-checkbox {
						width: 100%;
						margin: 0;
						margin-top: 5px;
					}
				}
			}
		}

		.dialog-footer {
			display: inline-block;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.dialog-footer_hint {
				flex: 1;
				min-width: 0;
				font-size: 12px;
				color: #bcbac5;
				text-align: left;
			}
		}
	}
</style>